<template>
  <div id="login_body">
    <div id="login_container">
      <div style="height: 50px">
        <p>系统登录</p>
        <span v-show="show" style="color: red">X用户名或密码错误</span>
      </div>
      <el-input
        class="login_input"
        v-model="input_user"
        size="mini"
        prefix-icon="el-icon-user-solid"
        clearable
      ></el-input>
      <el-input
        class="login_input"
        v-model="input_pwd"
        size="mini"
        prefix-icon="el-icon-lock"
        show-password
        clearable
      ></el-input>

      <el-button @click="clicklogin" class="login_btn" size="mini"
        >登录</el-button
      >

      <div class="verifybox">
        <slide-verify
          v-show="verify"
          :l="42"
          :r="10"
          :w="300"
          :h="130"
          slider-text="向右滑动"
          @success="onSuccess"
          @fail="onFail"
          @refresh="onRefresh"
          ref="slideblock"
        ></slide-verify>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "../apis/users";
export default {
  data() {
    return {
      input_user: "",
      input_pwd: "",
      show: false,

      verify: false,
    };
  },

  methods: {
    onSuccess() {
      this.$refs.slideblock.reset();
      this.verify = false;
      login({ account: this.input_user, password: this.input_pwd }).then(
        (res) => {
          // console.log(res.data.id);
          localStorage.id = res.data.id; //用户id
          localStorage.role = res.data.role; //权限
          localStorage.user = this.input_user; //用户名
          localStorage.token = res.data.token; //用户的token

          if (res.data.code == 0) {
            this.$router.push("/index/main");

            this.$message({
              message: "恭喜你，登陆成功",
              type: "success",
            });
          } else {
            this.show = true;
          }
        }
      );
    },

    onFail() {
      console.log("失败");
    },
    onRefresh() {
      console.log("刷新");
    },
    clicklogin() {
      this.verify = true;
      // console.log(this.input_user, this.input_pwd);
    },
  },
};
</script>

<style lang="less">
@import url("../assets/styles/themes.less");

#login_body {
  width: 100%;
  height: 100%;
  background-color: @basecolor1;
  display: flex;

  // align-items: center;
  background-image: url("../assets/imgs/banner1.png"),
    url("../assets/imgs/banner2.png");
  background-repeat: no-repeat;
  background-position: bottom, 20% -50%;
}
#login_container {
  position: relative;
  .verifybox {
    position: absolute;
    top: 18px;
    .slide-verify-slider {
      margin-top: 0;
    }
  }

  width: 300px;
  height: 180px;
  margin-left: 62%;
  margin-top: 15%;
  background-color: @basecolor2;
  padding: 20px;
  border-radius: 10px;
  p {
    color: #fff;
    text-align: center;
  }
  .login_input {
    margin-bottom: 20px;
  }
  .login_btn {
    width: 100%;
    background-color: @basecolor1;
    border: 1px solid @basecolor2;
    color: @sizecolor;
  }
}
</style>